<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Yoka365——打卡二维码 </title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<style>
		h3 {
			margin: 50px auto;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
			color: aqua;
		}

		div {
			width: 300px; 
			height: 300px; 
			left: 50%; 
			top: 50%; 
			position: absolute; 
			margin-top: -150px; 
			margin-left: -150px;
		}
		</style>
	</head>

	<body>
	<body style="background-color: #4a87ee;">
	<h3>{$companyName} - {$scanerName}</h3>
	<div>
		<img id="qr" src="/qr/{$scanerId}.png" />
	</div>
	</body>
	</body>
</html>
<script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script>
<script type="text/javascript">
	var scanerId = {$scanerId};

{literal}
	var refreshImg = function(){
		var img = document.getElementById('qr');
		var src = img.src;
		var suf = new Date().getTime();

		var pos = src.indexOf('?');
		if(pos != -1){
			img.src = src.substring(0, pos) + '?t=' + suf;
		}else{
			img.src = src + '?t=' + suf;
		}	
	};

	// use sockjs
	var sock = new SockJS('/ibid/socketio/');
	sock.onopen = function(){
		console.log('open');
	};
	sock.onclose = function(){
		console.log('close');
	};

	sock.onmessage = function(e){
		console.log(e.data);

		if(e.data){
			var obj = JSON.parse(e.data);
			if('scanerQrRefreshed' == obj){
				refreshImg();
			}
		}
	};

	function send(message){
		if(sock.readyState === SockJS.OPEN){
			console.log('sending message')
			sock.send(JSON.stringify(message));
		}else{
			console.log('The socket is not open.');
		}
	}

	window.onbeforeunload = function(){
		sock.close();
	};
</script>
{/literal}